<template>
	<view class="special">
		<!-- 商品内容 -->
		<view class="special-content" v-for="item in topicList" :key="item.id">
			<image class="special-img" :src="item.scene_pic_url" mode="widthFix"></image>
			<view class="special-b">
				<view class="special-b-t">关爱他成长的每一个足迹</view>
				<view class="special-b-m">专业运动品牌同厂，毛毛虫鞋买二送一</view>
				<view class="special-b-b">￥{{item.price_info.toFixed(2)}}元起</view>
			</view>
		</view>
		<!-- 上下页按钮 -->
		<view class="special-button">
			<view :class="{active:!buttonStyle}" @click="backPage">上一页</view>
			<view :class="{active:buttonStyle}" @click="toPage">下一页</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 专题数据数组
				topicList: [],
				// 上下页按钮状态
				buttonStyle: true
			}
		},
		methods: {
			// 上一页
			backPage() {
				if (this.buttonStyle) {
					return
				}
				this.$request({
					url: "/topic/list",
					data: {
						page: 1,
						size: 10
					},
					successCb: res => {
						// console.log(res);
						this.buttonStyle = true
						this.topicList = res.data
						uni.pageScrollTo({
							scrollTop: 0
						});
					}
				})
			},
			// 下一页
			toPage() {
				if (!this.buttonStyle) {
					return
				}
				this.$request({
					url: "/topic/list",
					data: {
						page: 2,
						size: 10
					},
					successCb: res => {
						// console.log(res);
						this.buttonStyle = false
						this.topicList = res.data
						uni.pageScrollTo({
							scrollTop: 0
						});
					}
				})
			}
		},
		onShow() {
			this.$request({
				url: "/topic/list",
				data: {
					page: 1,
					size: 10
				},
				successCb: res => {
					// console.log(res);
					this.topicList = res.data
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #efefef;
	}

	.special {
		padding-bottom: 100rpx;

		.special-content {
			margin-bottom: 40rpx;

			.special-img {
				width: 750rpx;
				vertical-align: middle;
			}

			.special-b {
				background-color: #fff;
				text-align: center;
				font-family: '黑体';
				font-size: 36rpx;
				overflow: hidden;
				padding-bottom: 20rpx;

				.special-b-t {
					margin: 20rpx 0;
				}

				.special-b-m {
					margin: 40rpx 0;
					font-size: 32rpx;
				}

				.special-b-b {
					font-size: 28rpx;
					margin-bottom: 20rpx;
					color: #9b0000;
				}
			}
		}

		.special-button {
			width: 750rpx;
			display: flex;

			view {
				width: 50%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background-color: #f7f8fa;
				font-family: '黑体';
				background-color: #f3f3f4;
			}

			.active {
				color: #8b0000;
				background-color: #fff;
			}
		}
	}
</style>
